@import '../../styles/var.scss';
.img-group-add {
  border: 1px dashed $border-color-base;
  display: inline-block;
  height: 100px;
  width: 100px;
  vertical-align: top;
  position: relative;
  overflow:hidden;
  &:hover {
      border-color: $color-primary;
      .el-icon-plus {
          font-size: 28px;
          color: $color-primary;
      }
  }
  box-sizing: border-box;
  button {
      border: 0;
      outline: none;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: transparent;
      cursor: pointer;

      .el-icon-plus {
          font-size: 28px;
          color: #8c939d;
      }
      img {
          max-width: 100%;
          max-height: 100%;
      }
  }
}
.img-group {
  &-upload{
    margin-top:10px;
    .img-upload{
      margin-bottom:10px;
    }
  }
  &-item{
    width:100px;
    height:100px;
    display:inline-block;
    border:1px solid $border-color-base;
    overflow:hidden;
    vertical-align:middle;
    margin-right:10px;
    margin-bottom:10px;
    position:relative;
    button{
      border:0;
      background:transparent;
      height:100%;
      width:100%;
      outline:none;
    }
    img{
      max-width: 100%;
      max-height: 100%;
    }
    .el-icon-close{
      position:absolute;
      top: -18px;
      right: -18px;
      color:#fff;
      font-size:12px;
      cursor: pointer;
      transition:all 0.2s ease 0s;
      &:before{
        z-index: 100;
        position: absolute;
        right: 5px;
        top: 5px;
      }
      &:after{
        border:18px solid transparent;
        content:'';
        right:0;
        top:0;
        position:absolute;
        border-top-color:#999;
        border-right-color:#999;
      }
      &:hover{
        &:after{
          border-top-color:#ff4949;
          border-right-color:#ff4949;
        }
      }
    }
    &:hover{
      .el-icon-close{
        top: 0;
        right: 0;
      }
    }
  }
}